<html>

	<head>
		<style>
		
			.active{
				background:red;
			}
		</style>
	</head>
	<body>
		<input>
		
		<ul style="display:none;" id="ul">
			<li class="active">内容一</li>
			<li>内容二</li>
			<li>内容三</li>
			<li>内容四</li>
			<li>内容五</li>
			<li>内容六</li>
		</ul>
		<script>
			var  ipt = document.querySelector("input");
			
			
			ipt.onfocus = function (){
				ul.style.display = "block"
			}
			
			
			document.onkeydown = function(e){
				var	el = document.querySelector(".active");
				if(e.keyCode === 13){
					ipt.value = el.innerHTML;
					ul.style.display = "none"
					ul.firstElementChild.classList.add("active")
				}
				
				if(e.keyCode === 38){
					
				}
				
				if(e.keyCode === 40){
					el.nextElementSibling ? el.nextElementSibling.classList.add("active") : ul.firstElementChild.classList.add("active")
					
				}
				el.classList.remove("active")
			}
			
		
		</script>
	</body>


</html>